loop {
    .loop-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15px;
        .loopbox {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 100px;
            .loopitem {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #FFF;
                border: 1px solid #EAEAEA;
                height: 80px;
                width: 120px;
                [clock] {
                    font-size: 30px;
                }
                [action] {
                    font-size: 15px;
                }
            }
        }
        .exchange {
            margin: 0 15px;
            border-radius: 50%;
            background: #4A90E2;
            color: #FFF;
            height: 43px;
            width: 43px;
            font-size: 23px;
            display: flex;
            align-items: center;
            justify-content: center; // margin: 20px;
        }
        .exchange:active {
            transform: scale(0.95, 0.95);
        }
        .paddingbox {
            padding: 25px 15px;
            width: 100%;
            .loopbox {
                height: 210px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                border-radius: 5px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
                [clock] {
                    font-size: 55px;
                    color: #389BEE;
                }
                [text] {
                    margin-top: 15px;
                    font-size: 15px;
                }
                [action] {
                    margin-top: 5px;
                    font-size: 15px;
                }
            }
        }
        .btns {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
            [btn] {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16px;
                width: 80px;
                height: 80px;
                border-radius: 50%;
                color: #fff;
                transition: all 0.3s;
            }
            .disable {
                opacity: 0.5;
            }
            .start {
                background-color: #1AA717;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
            }
            .pause {
                background-color: #FBA613;
                margin-left: 75px;
            }
            .continue {
                background-color: #389BEE;
                margin-left: 75px;
            }
            .cancel {
                background-color: #D61313;
                margin-right: 75px;
            }
        }
        .start-btn {
            margin-top: 30px;
        }
        .arrow {
            color: #D8D8D8;
        }
        .item-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            padding: 5px 15px;
            [item] {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 28vw;
                height: 11vw;
                margin-top: 8px;
                border-radius: 5px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
            }
            [item]:active {
                transform: scale(0.95, 0.95);
            }
        }
    }
}